<template>
  <div class="wrap">
    <Divider type="2" />

    <!-- 图片 -->
    <a-row>
      <a-col
        :xs="{ span: 24, offset: 0 }"
        :sm="{ span: 22, offset: 1 }"
        :md="{ span: 20, offset: 2 }"
        :lg="{ span: 18, offset: 3 }">
        <div class="tw-flex tw-items-center tw-justify-center">
          <div class="tw-flex tw-items-center tw-justify-center">
            <div
              v-for="(item, index) in items"
              :key="index"
              class="image-wrap tw-px-1"
              @click="chooseIndex = index">
              <img :src="item.normal" class="magic">  
            </div>
          </div>
        </div>
      </a-col>
    </a-row>

    <!-- 遮罩 -->
    <div class="overlay" />

    <!-- 内容 -->
    <div class="tw-relative tw-z-10">
      <div class="title w-z-20 tw-overflow-hidden">角色</div>
      <a-row v-if="choose" class="tw-mt-10">
        <a-col
          :xs="{ span: 22, offset: 1 }"
          :md="{ span: 14, offset: 0 }">
          <div class="tw-flex tw-justify-center">
            <div class="tw-p-5" style="max-width: 400px;">
              <div class="tw-text-6xl tw-text-b-secondary tw-font-bold">{{ choose.name }}</div>
              <div class="tw-mt-8 tw-text-xl tw-text-b-secondary tw-font-bold tw-leading-6">
                {{ choose.desc }}
              </div>
              <div class="tw-mt-8 tw-text-xl tw-text-b-secondary tw-font-bold tw-leading-6">
                {{ choose.tribe }}
              </div>
               <div class="tw-mt-8 tw-text-xl tw-text-b-secondary tw-font-bold tw-leading-6">
                能力值：{{ choose.able }} <!--a-progress
                      size="small"
                      :percent="50"
                      :show-info="false"
                      stroke-color="rgb(255, 252, 214)"
                      trail-color="rgba(255, 255, 255, .5)"
                      stroke-linecap="square" /-->
              </div>
              <!--div class="tw-mt-3">
                <div
                  v-for="(type, index) in ['能力值']"
                  :key="index"
                  class="tw-flex tw-mb-2">
                  <div class="tw-mr-20 tw-text-b-secondary tw-font-medium tw-text-lg">{{ type }}</div>
                  <div style="width: 300px;">
                    <a-progress
                      size="small"
                      :percent="30"
                      :show-info="false"
                      stroke-color="rgb(255, 252, 214)"
                      trail-color="rgba(255, 255, 255, .5)"
                      stroke-linecap="square" />
                  </div>
                </div>
              </div-->
            </div>
          </div>
        </a-col>
        <a-col
          :xs="{ span: 22, offset: 1 }"
          :md="{ span: 10, offset: 0 }"
          class="tw-text-left">
          <img :src="choose.active" class="magic tw-inline" style="max-width: 400px;">
        </a-col>
      </a-row>
    </div>

  </div>
</template>

<script setup>
import c1 from '@/assets/c1.png'
import c2 from '@/assets/c2.png'
import c3 from '@/assets/c3.png'
import c4 from '@/assets/c4.png'
import c5 from '@/assets/c5.png'
import c6 from '@/assets/c6.png'
import c7 from '@/assets/c7.png'
import c8 from '@/assets/c8.png'
import c1a from '@/assets/c1a.png'
import c2a from '@/assets/c2a.png'
import c3a from '@/assets/c3a.png'
import c4a from '@/assets/c4a.png'
import c5a from '@/assets/c5a.png'
import c6a from '@/assets/c6a.png'
import c7a from '@/assets/c7a.png'
import c8a from '@/assets/c8a.png'
import { computed, ref } from 'vue'

const items = [
  {
    name: 'Amorites',
    desc: 'The Amorites, who were excellent warriors, are the creators of the magnificent Babylonian civilization. ',
    tribe: 'Tribe: Amorites',
    normal: c1,
    active: c1a,
    able: 50
  },
  {
    name: 'Semite',
    desc: `They were rigorous, calm, and accustomed to speculation and reflection. They reflected on death and wrote philosophical dirges; they were always immersed themselves in a mild and dreamy thought. `,
    tribe: 'Tribe: Semite',
    normal: c2,
    active: c2a,
    able: 60
  },
  {
    name: 'Aryan',
    desc: `Aggression is their outstanding trait. Their people were good at riding and shooting. They always wandered around and fought against others. If it went well, they would capture others’ land. The one who had the brilliant combat performance would be regarded as the tribe warrior. `,
    tribe: 'Tribe: Aryan',
    normal: c3,
    active: c3a,
    able: 50
  },
  {
    name: 'Yuanmou',
    desc: `Gathering and hunting were their ways to search for food. Due to the dangerous natural surroundings, Yuanmou often worked together, shared the food they got, lived in groups, and learned how to make stone tools and use fire. `,
    tribe: 'Tribe: Yuanmou',
    normal: c4,
    active: c4a,
    able: 75
  },
  {
    name: 'Mayan',
    desc: `They were philosophical people who excelled at Mathematics, astronomy, and ritual activities. They were particularly interested in studying the time and observing stars. `,
    tribe: 'Tribe: Mayan',
    normal: c5,
    active: c5a,
    able: 60
  },
  {
    name: 'Inuit',
    desc: `The Inuit were skilled at hunting. They lived primarily on prey, and raised their offspring collectively. The Inuit children often grew up in multiple families. `,
    tribe: 'Tribe: Inuit',
    normal: c6,
    active: c6a,
    able: 80
  }, 
  {
    name: 'Minoan',
    desc: `The Minoans were talented inventors and engineers, as evidenced by their luxurious palaces and fine art. Their society was highly civilized with advanced science and technology. Wars or serious diseases never hit them. They grew up like princes and princesses. They had fun making money and enjoyed the wonderful romance. After death, their souls would ascend to heaven. `,
    tribe: 'Tribe: Minoan',
    normal: c7,
    active: c7a,
    able: 70
  },
  {
    name: 'Pets',
    desc: `Pets are the most important partners of tribesmen. There are many kinds of pets in the Stone Age. They’re cute and powerful helpers that assist you to kill enemies in battle and become a great tribal warrior. `,
    tribe: 'Race: Pets',
    normal: c8,
    active: c8a,
    able: 40
  }
]
const chooseIndex = ref(0)
const choose = computed({
  get() {
    return items[chooseIndex.value]
  },
  set(newVal) {
    if (!newVal) return
    chooseIndex.value = items.findIndex(o => o.name === newVal.name)
  }
})
</script>


<style lang="less" scoped>
  .wrap {
    position: relative;
    background-image: url("@/assets/bg2.png");
    background-repeat: repeat;
    overflow: hidden;
  }
  .image-wrap {
    height: 500px;
    img {
      height: 100%;
      object-fit: contain;
    }
  }
  .inner-wrap {
    position: relative;
  }

  :deep {
    .ant-progress-inner {
      border-radius: 0;
      .ant-progress-bg {
        height: 20px!important;
      }
    }
  }
  .overlay {
    position: absolute;
    left: 0;
    right: 0;
    top: 360px;
    bottom: 0;
    background-image: url("@/assets/bg3.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
</style>